{% extends 'base.html' %}

{% block title %}数据分析{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">学习数据分析</h1>
    
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <h2 class="display-4 text-primary">{{ total_exercises }}</h2>
                    <p class="lead">已完成练习</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <h2 class="display-4 text-success">{{ "%.1f"|format(avg_score) }}%</h2>
                    <p class="lead">平均分数</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    {% set streak = 5 %}  <!-- 这里应该是一个计算的值，示例中使用固定值 -->
                    <h2 class="display-4 text-warning">{{ streak }}</h2>
                    <p class="lead">连续学习天数</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">练习得分趋势</h5>
                </div>
                <div class="card-body">
                    <canvas id="scoreChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">练习难度分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="difficultyChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header">
            <h5 class="card-title mb-0">练习历史记录</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>练习名称</th>
                            <th>课程</th>
                            <th>难度</th>
                            <th>完成时间</th>
                            <th>分数</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for exercise_data in exercises_data %}
                            {% set exercise = exercise_data.exercise %}
                            <tr>
                                <td>{{ exercise.title }}</td>
                                <td>{{ exercise.course.title }}</td>
                                <td>
                                    {% for i in range(1, 6) %}
                                        {% if i <= exercise.difficulty %}
                                            <i class="bi bi-star-fill text-warning"></i>
                                        {% else %}
                                            <i class="bi bi-star text-muted"></i>
                                        {% endif %}
                                    {% endfor %}
                                </td>
                                <td>{{ exercise_data.completion_time.strftime('%Y-%m-%d %H:%M') }}</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ exercise_data.score }}%;" aria-valuenow="{{ exercise_data.score }}" aria-valuemin="0" aria-valuemax="100">{{ exercise_data.score }}%</div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script>
$(document).ready(function() {
    // 准备练习得分趋势数据
    var exercises = {{ exercises_data|map(attribute='exercise.title')|list|tojson }};
    var scores = {{ exercises_data|map(attribute='score')|list|tojson }};
    
    // 反转数组以显示时间顺序
    exercises.reverse();
    scores.reverse();
    
    // 如果数据超过10项，只显示最近10项
    if (exercises.length > 10) {
        exercises = exercises.slice(-10);
        scores = scores.slice(-10);
    }
    
    // 创建得分趋势图
    var scoreCtx = document.getElementById('scoreChart').getContext('2d');
    var scoreChart = new Chart(scoreCtx, {
        type: 'line',
        data: {
            labels: exercises,
            datasets: [{
                label: '练习得分',
                data: scores,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
    
    // 准备难度分布数据
    var difficultyData = [
        {{ difficulty_distribution.get(1, 0) }},
        {{ difficulty_distribution.get(2, 0) }},
        {{ difficulty_distribution.get(3, 0) }},
        {{ difficulty_distribution.get(4, 0) }},
        {{ difficulty_distribution.get(5, 0) }}
    ];
    
    // 创建难度分布图
    var difficultyCtx = document.getElementById('difficultyChart').getContext('2d');
    var difficultyChart = new Chart(difficultyCtx, {
        type: 'doughnut',
        data: {
            labels: ['难度 1', '难度 2', '难度 3', '难度 4', '难度 5'],
            datasets: [{
                data: difficultyData,
                backgroundColor: [
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)',
                    'rgba(255, 159, 64, 0.6)',
                    'rgba(255, 99, 132, 0.6)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                }
            }
        }
    });
});
</script>
{% endblock %} 